import React from 'react';
import {connect} from 'dva';
import styles from './Vote.css';
import {Row, Col, Card, Form, Checkbox, Radio, Spin, Button, message} from 'antd';
import MainLayout from '../components/layouts/MainLayout';
import {routerRedux} from 'dva/router';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

class VoteForm extends React.Component {

  state = {
    candidates: [],
    submitLoading: false
  };

  changeSelect = (e) => {
    console.log(e);
    const candidates = this.state.candidates;
    console.log(candidates);
    if (e.target.checked) {
      candidates.push(e.target.id);
      this.setState({candidates: candidates});
    } else {
      this.setState({candidates: candidates.filter((item) => item != e.target.id)});
    }
  };

  checkIsChecked = (id) => {
    const {setFieldValue} = this.props.form;

    return this.state.candidates.find((e)=> e == id) !== undefined;
  };

  handleSubmit = (e) => {
    const submitVote = this.props.submitVote;
    var candidates = this.state.candidates;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        if (values.candidate !== undefined) {
          candidates = [values.candidate];
        }
        this.setState({submitLoading: true});
        submitVote({candidates: candidates});
        this.setState({submitLoading: false});
      }
    });
  };

  render() {
    const {getFieldDecorator} = this.props.form;

    var options;
    console.log('render');

    const changeSelect = this.changeSelect;
    const checkIsChecked = this.checkIsChecked;

    if (this.props.rule == 1) {
      const radioStyle = {
        display: 'block',
      };

      var radios = this.props.candidates.map(function (candidate) {
        if (candidate.images !== null) {
          const images = candidate.images.map(function (image) {
            return (
              <image key={image} src={image}/>
            );
          });

          return (
            <Radio key={candidate.id} style={radioStyle} value={candidate.id} onChange={changeSelect}>
              <Card className={styles.card} title={candidate.name}>
                {candidate.description}
                {images}
              </Card>
            </Radio>
          );
        } else {
          return (
            <Radio key={candidate.id} style={radioStyle} value={candidate.id} onChange={changeSelect}>
              <Card className={styles.card} title={candidate.name}>
                {candidate.description}
              </Card>
            </Radio>
          );
        }


      });

      options = (
        <FormItem>
          {getFieldDecorator('candidate', {
            rules: []
          })(
            <RadioGroup>
              {radios}
            </RadioGroup>
          )}
        </FormItem>
      );
    } else {
      options = this.props.candidates.map(function (candidate) {
        if (candidate.images != null) {
          const images = candidate.images.map((image) => {
            return (
              <img key={image} className={styles.images} src={image}/>
            );
          });

          return (
            <FormItem key={candidate.id}>
              {getFieldDecorator('' + candidate.id, {
                rules: [],
                valuePropName: 'checked',
                initialValue: checkIsChecked(candidate.id)
              })(
                <Checkbox onChange={changeSelect}>
                  <Card className={styles.card} title={candidate.name}>
                    <p>{candidate.description}</p>
                    {images}
                  </Card>
                </Checkbox>
              )}
            </FormItem>
          );
        }

        return (
          <FormItem key={candidate.id}>
            {getFieldDecorator('candidates[]', {
              rules: []
            })(
              <Checkbox onChange={changeSelect}>
                <Card className={styles.card} title={candidate.name}>
                  <p>{candidate.description}</p>
                </Card>
              </Checkbox>
            )}
          </FormItem>
        );
      });
    }


    return (
      <Form onSubmit={this.handleSubmit}>
        {options}
        <FormItem>
          <Button loading={this.state.submitLoading} htmlType="submit" type="primary">提交</Button>
        </FormItem>
      </Form>
    );
  };
}

const WrappedVoteForm = Form.create({
  mapPropsToFields: ({candidates, rule}) => {
    return {
      candidates: candidates,
      rule: rule,
    };
  }
})(VoteForm);

const Vote = ({dispatch, vote}) => {

  const location = {
    pathname: '/vote'
  };

  function submitVote(query) {
    dispatch({
      type: 'vote/submit',
      payload: {...query, ...{id: vote.id}}
    });
  }

  if (vote.loading) {
    return (
      <MainLayout location={location}>
        <Row>
          <Col span={3}>

          </Col>
          <Col span={18}>
            <Spin>
              <Card title="投票详情">

              </Card>
            </Spin>
          </Col>
          <Col span={3}>

          </Col>
        </Row>
      </MainLayout>
    );
  } else {
    var card;

    if (vote.submitLoading) {
      card = (
        <Spin>
          <Card title="投票详情">
            <h2>{vote.subject.title}</h2>
            <p>{vote.subject.description}</p>
            <WrappedVoteForm candidates={vote.candidates} rule={vote.rule} submitVote={submitVote}/>
          </Card>
        </Spin>
      );
    } else {
      card = (
        <Card title="投票详情">
          <h2>{vote.subject.title}</h2>
          <p>{vote.subject.description}</p>
          <WrappedVoteForm candidates={vote.candidates} rule={vote.rule} submitVote={submitVote}/>
        </Card>
      );
    }

    return (
      <MainLayout location={location}>
        <Row>
          <Col span={3}>

          </Col>
          <Col span={18}>
            {card}
          </Col>
          <Col span={3}>

          </Col>
        </Row>
      </MainLayout>
    );
  }
};

function mapStateToProps({vote}) {
  return {
    vote: vote
  };
}

export default connect(mapStateToProps)(Vote);
